<template>
  <div class="app-container">
    <!-- <el-card class="filter-container" shadow="never">
        <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button
            style="float: right"
            @click="searchQueryList()"
            type="primary"
            size="small">
            查询结果
          </el-button>
        </div>
        <div style="margin-top: 15px">
          <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
            <el-form-item label="输入搜索：">
              <el-input style="width: 203px" v-model="listQuery.key" placeholder="品牌名称/关键字"></el-input>
            </el-form-item>
          </el-form>
        </div>
    </el-card> -->
    <div class="choose-dept">
       <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="汇率设置" :name="'second'">
          <div class="rate">
            <label>汇率值：</label>
            <el-input v-model="moneyRate"  placeholder="汇率值" />
            <el-button type="primary" plain @click="saveMoneyRate">保存</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="系统配置" :name="'first'">
          <div>
            <el-card class="operate-container" shadow="never">
              <i class="el-icon-tickets"></i>
              <span>系统配置列表</span>
              <el-button class="btn-add" @click="handleAddProduct()" size="mini">
                添加新配置
              </el-button>
            </el-card>
            <el-table ref="productTable"
                        :data="list"
                      style="width: 100%;margin-bottom: 20px;"
                        v-loading="listLoading"
                        row-key="id"
                        border
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                        >
                <el-table-column label="属性名" width="300" align="center">
                  <template slot-scope="scope"> {{scope.row.key}} </template>
                </el-table-column>
                <el-table-column label="属性值" width="300" align="center">
                  <template slot-scope="scope">{{scope.row.value}}</template>
                </el-table-column>
                <el-table-column label="描述" width="300" align="center">
                  <template slot-scope="scope">{{scope.row.desc}}</template>
                </el-table-column>
                <!-- <el-table-column label="创建时间" width="250" align="center">
                  <template slot-scope="scope">{{scope.row.createTime}}</template>
                </el-table-column> -->
                <el-table-column label="操作" width="300" align="center">
                  <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="handleEditDeploy(scope.$index, scope.row)">编辑
                      </el-button>
                      <!-- <el-button
                        size="mini"
                        @click="handleUpdateDeploy(scope.$index, scope.row)">分配配置
                      </el-button> -->
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleDeleteDeploy(scope.$index, scope.row)">删除
                      </el-button>
                  </template>
                </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
      
    <!-- 新增配置的弹窗 -->
    <el-dialog title="新增配置" :visible.sync="isNewDeployOpen" :close-on-click-modal="false" :show-close="true" class="adjustmentBox">
        <el-form :model="newForm" style="width:25rem;" :rules="newFormRules" >
            <el-form-item label="属性名" prop="key" required label-width="5rem">
                <el-input v-model="newForm.key" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
              <el-form-item label="属性值" prop="value" required label-width="5rem">
                <el-input v-model="newForm.value" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="描述"  prop="sort" label-width="5rem">
                <el-input v-model="newForm.desc" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <!-- <el-form-item label="图标"   prop="icon" label-width="5rem">
                <el-input v-model="newForm.icon" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="saveNewDeploy('newForm')" style="color:#fff;background-color:#417FF6;">保存</el-button>
            <el-button @click="isNewDeployOpen = false">关闭</el-button>
        </div>
    </el-dialog>
    <!-- 编辑配置的弹窗 -->
    <el-dialog title="编辑配置" :visible.sync="isEditDeployOpen" :close-on-click-modal="false" :show-close="true" class="adjustmentBox">
        <el-form :model="editForm" style="width:25rem;" :rules="editFormRules" >
            <el-form-item label="属性名" prop="key" required label-width="5rem">
                <el-input v-model="editForm.key" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="属性值" prop="value" required label-width="5rem">
                <el-input v-model="editForm.value" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
             <el-form-item label="描述"  prop="sort" label-width="5rem">
                <el-input v-model="editForm.desc" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <!-- <el-form-item label="排序" required prop="sort" label-width="5rem">
                <el-input v-model="editForm.sort" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="图标"  required prop="icon" label-width="5rem">
                <el-input v-model="editForm.icon" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="saveDeployInfo('editForm')" style="color:#fff;background-color:#417FF6;">保存</el-button>
            <el-button @click="isEditDeployOpen = false">关闭</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
    import {
    fetchDeployList,
    updateDeployInfo,
    newDeployInfo,
    deleteDeploy,
    getRate,
    setRate
  } from '@/api/deploy'
//   import {fetchList as fetchBrandList} from '@/api/brand'
//   import {fetchListWithChildren} from '@/api/productCate'

  const defaultListQuery = {
    key: null,
    pageNum: 1,
    pageSize: 5,
  };
  export default {
    name: "DeployList",
    data() {
      return {
        activeName:"second",//默认tab
        moneyRate:0.0,//汇率
          list:[],
          defaultProps: {
            children: 'children',
            label: 'label'
            },
          listQuery:Object.assign({}, defaultListQuery),
          newForm:{//新增配置弹框里内容
            key:'',
            value:'',
            desc:'',
          },
          editForm: {//编辑配置弹框里内容
            key:'',
            value:'',
            desc:'',
          },
          newFormRules:{
            key:[
                { required: true,  message: '配置名不能为空', trigger: ['blur','change']}
             ],
            value:[
                { required: true,  message: '链接不能为空', trigger: ['blur','change']}
             ],
            //  sort:[
            //     { required: true,  message: '排序不能为空', trigger: ['blur','change']}
            //  ],
            //  icon:[
            //     { required: true,  message: '图标不能为空', trigger: ['blur','change']}
            //  ],
          },
          editFormRules:{
            key:[
                { required: true,  message: '配置名不能为空', trigger: ['blur','change']}
             ],
             value:[
                { required: true,  message: '链接不能为空', trigger: ['blur','change']}
             ],
            //  sort:[
            //     { required: true,  message: '排序不能为空', trigger: ['blur','change']}
            //  ],
            //  icon:[
            //     { required: true,  message: '图标不能为空', trigger: ['blur','change']}
            //  ],
          },

          isNewDeployOpen:false,//新增配置弹窗
          isEditDeployOpen:false,//编辑配置弹窗
         
      }
    },
    created() {
      this.getList();
      this.getMoneyRate();
    },
    methods:{
      handleClick(tab, event){
        console.log( tab.$attrs.name)
        // this.activeName =  tab.$attrs.name;
      },
      getMoneyRate(){
        let self = this;
        getRate().then(res=>{
          if(res.code ==200){
            self.moneyRate =  res.data;
          }
        })
      },
      saveMoneyRate(){
        let self = this;
        if(!self.moneyRate){
          self.$message({
            message: '请确认汇率值',
            type: 'warning',
            duration: 1000
          });
          return;
        }
        let tempObj={};
        tempObj.moneyRate = self.moneyRate;
        setRate(tempObj).then(res=>{
          if(res.code ==200){
            self.$message({
              message: '修改成功',
              type: 'success',
              duration: 1000
            });
            self.getMoneyRate();
          }
        })
      },
      getList() {
        this.listLoading = true;
        fetchDeployList(this.listQuery).then(response => {
            if(response.code === 200){
              this.listLoading = false;
              let res = response.data;
              this.list = res.list;
              this.total = response.data.total;
              this.totalPage = response.data.totalPage;
              this.pageSize = response.data.pageSize;
            }
        });
      },
      searchQueryList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },
      handleEditDeploy(index,item){
        this.isEditDeployOpen = true;
        this.editForm = JSON.parse(JSON.stringify(item));
        //  this.editForm.currentUId = item.id;
        //  this.editForm.key = item.key;
        //  this.editForm.value = item.value;
        //  this.editForm.desc = item.desc;
         console.log(this.editForm)
      },
      handleAddProduct(){
          this.isNewDeployOpen = true;
      },
      saveNewDeploy(){
          let self= this;
          
          self.newForm.description = self.newForm.name;
          console.log(self.newForm);
        newDeployInfo(self.newForm).then(response=>{
            if(response.code == 200){
                self.$message({
                  message: '新建成功',
                  type: 'success',
                  duration: 1000
                });
            self.isNewDeployOpen=false;
            self.getList();
            }
        })
      },
      saveDeployInfo(){
          console.log(this.editForm);
        updateDeployInfo(this.editForm.currentUId,this.editForm).then(response=>{
            this.$message({
                message: '修改成功',
                type: 'success',
                duration: 1000
            });
            this.isEditDeployOpen=false;
            this.getList();
        });
      },
      handleDeleteDeploy(index,item){
          let self = this;
           self.$confirm('删除该配置, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                // let arrTemp= [];
                // arrTemp.push(item.id);
                // //objTemp.ids = arrTemp;
                // let params = new URLSearchParams();
                // params.append('id', arrTemp);
                let delId=item.id;
                deleteDeploy(delId).then(response=>{
                    if(response.code === 200){
                        self.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1000
                        });
                        self.getList();
                    }
                });
            }).catch(() => {
                // self.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });
      },
      
    }
  }
</script>
<style scoped>
.btn-add{
    font-size: 14px;
    padding: 10px;
    margin-top: -8px;
  color:#fff;
  background-color:#417FF6;
}
/* 弹出框的宽度 */
.adjustmentBox >>> .el-dialog{
  width: 28rem;
} 
.rate{
  margin: 40px 0;
}
.rate .el-input{
  width: 200px;
}
</style>